## 1.6. HTML-изображения
https://trikky.ru/wp-content/blogs.dir/1/files/2018/04/ch.jpg

### АТРИБУТЫ ЭЛЕМЕНТА \<IMG>

| Атрибут                                  | Описание, принимаемое значение           |
|------------------------------------------|------------------------------------------|
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">alt</kbd> | Атрибут<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">alt</kbd><span> </span>добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;">Синтаксис:<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">alt="описание изображения"</kbd>. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px; color: rgb(56, 186, 199);">crossorigin</kbd> | Атрибут<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">crossorigin</kbd><span> </span>позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения:<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">anonymous</kbd><span> </span>— Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;"><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">use-credentials</kbd><span> </span>— Cross-origin запрос выполняется с передачей учетных данных.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;">Синтаксис:<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">crossorigin="anonymous"</kbd>. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">height</kbd> | Атрибут<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">height</kbd><span> </span>задает высоту изображения в<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">px</kbd>.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;">Синтаксис:<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">height="300"</kbd>. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">ismap</kbd> | Атрибут<kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">ismap</kbd><span> </span>указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">ismap</kbd><span> </span>допускается только в случае, если элемент<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">&lt;img&gt;</kbd><span> </span>является потомком элемента<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">&lt;a&gt;</kbd><span> </span>с действительным атрибутом<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">href</kbd>.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;">Синтаксис:<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">ismap</kbd>. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">longdesc</kbd> | URL расширенного описания изображения, дополняющее атрибут<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">alt</kbd>.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;">Синтаксис:<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">longdesc="http://www.example.com/description.txt"</kbd>. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">src</kbd> | Атрибут<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">src</kbd><span> </span>задает путь к изображению.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;">Синтаксис:<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">src="flower.jpg"</kbd>. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px; color: rgb(56, 186, 199);">sizes</kbd> | Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">srcset</kbd>. Значением атрибута является одна или несколько строк, указанных через запятую. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px; color: rgb(56, 186, 199);">srcset</kbd> | Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">src</kbd>. Значением атрибута является одна или несколько строк, разделенных запятой.<p style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px 0px 20px; padding: 0px;"></p><div class="code-toolbar" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; position: relative;"><pre class=" language-html" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px 0px 30px; padding: 20px; color: rgb(48, 48, 48); background: rgb(245, 245, 245); text-shadow: white 0px 1px; font-family: Consolas, Monaco, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, monospace; font-size: 0.95em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; overflow: auto; border: 1px solid rgb(230, 230, 230);"><code class=" language-html" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(48, 48, 48); background: none; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, monospace; font-size: 0.95em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none;"><span class="token tag" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 0, 85);"><span class="token tag" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 0, 85);"><span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">&lt;</span>img</span> <span class="token attr-name" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(102, 153, 0);">src</span><span class="token attr-value" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">"</span>flower.jpg<span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">"</span></span><br>     <span class="token attr-name" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(102, 153, 0);">srcset</span><span class="token attr-value" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">"</span><br>       img/flower-mobile.jpg 320w,<br>       img/flower-wide-mobile.jpg 480w,<br>       img/flower-tablet.jpg 768w,<br>       img/flower-desktop.jpg 1024w,<br>       img/flower-hires.jpg 1280w<span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">"</span></span><br>     <span class="token attr-name" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(102, 153, 0);">sizes</span><span class="token attr-value" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">"</span><br>       (max-width: 20em) 30vw,<br>       (max-width: 30em) 60vw,<br>       (max-width: 40em) 90vw<span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">"</span></span><br>     <span class="token attr-name" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(102, 153, 0);">alt</span><span class="token attr-value" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(0, 119, 170);"><span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">=</span><span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">"</span>Роза в моём саду<span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">"</span></span><span class="token punctuation" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; color: rgb(153, 153, 153);">&gt;</span></span></code></pre><div class="toolbar" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; position: absolute; top: 0px; right: 0px;"><div class="toolbar-item" style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px; display: inline-block;"><span style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 10px; display: block; background: rgb(250, 249, 248); border: 1px solid rgb(230, 230, 230); font-size: 0.8em;">HTML</span></div></div></div> |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">usemap</kbd> | Атрибут<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">usemap</kbd><span> </span>определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">#</kbd>. Значение ассоциируется со значением атрибута<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">name</kbd><span> </span>или<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">id</kbd><span> </span>элемента<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">&lt;map&gt;</kbd><span> </span>и создает связь между элементами<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">&lt;img&gt;</kbd><span> </span>и<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">&lt;map&gt;</kbd>. Атрибут нельзя использовать, если элемент<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">&lt;map&gt;</kbd><span> </span>является потомком элемента<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">&lt;a&gt;</kbd><span> </span>или<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">&lt;button&gt;</kbd>.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;">Синтаксис:<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">usemap="#mymap"</kbd>. |
| <kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">width</kbd> | Атрибут<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">width</kbd><span> </span>задает ширину изображения в<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">px</kbd>.<br style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 0px;">Синтаксис:<span> </span><kbd style="transition: all 0.3s ease-in-out 0s; box-sizing: border-box; margin: 0px; padding: 2px 6px; background: rgb(245, 245, 245); border-radius: 3px; font-size: 0.95em; font-family: &quot;Courier New&quot;, monospace; word-break: keep-all; border: 1px solid rgb(230, 230, 230); text-shadow: white 0px 1px;">width="500"</kbd>. |

### АТРИБУТЫ ЭЛЕМЕНТА \<AREA>

<table class="t3">
<caption>Таблица 2. Атрибуты элемента &lt;area&gt;</caption>
<tbody><tr>
<th>Атрибут</th>
<th>Краткое описание</th>
</tr>
<tr>
<td><kbd>alt</kbd></td>
<td>Задает альтернативный текст для активной области карты.</td>
</tr>
<tr>
<td><kbd>coords</kbd></td>
<td>Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми:<br>
         для <b>круга</b> — координаты центра и радиус круга;<br>
         для <b>прямоугольника</b> — координаты верхнего левого и правого нижнего углов;<br>
         для <b>многоугольника</b> — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.</td>
</tr>
<tr>
<td><kbd style="color:#38BAC7">download</kbd></td>
<td>Дополняет атрибут <kbd>href</kbd> и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения.</td>
</tr>
<tr>
<td><kbd>href</kbd></td>
<td>Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.</td>
</tr>
<tr>
<td><kbd style="color:#38BAC7">hreflang</kbd></td>
<td>Определяет язык связанного веб-документа. Используется только вместе с атрибутом <kbd>href</kbd>. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.</td>
</tr>
<tr>
<td><kbd style="color:#38BAC7">media</kbd></td>
<td>Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.</td>
</tr>
<tr>
<td><kbd style="color:#38BAC7">rel</kbd></td>
<td>Дополняет атрибут <kbd>href</kbd> информацией об отношении между текущим и связанным документом. Принимаемые значения:<br>
         <kbd>alternate</kbd> — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).<br>
         <kbd>author</kbd> — ссылка на автора документа.<br>
         <kbd>bookmark</kbd> — постоянный URL-адрес, используемый для закладок.<br>
         <kbd>help</kbd> — ссылка на справку.<br>
         <kbd>license</kbd> — ссылка на информацию об авторских правах на данный веб-документ.<br>
         <kbd>next/prev</kbd> — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.<br>
         <kbd>nofollow</kbd> — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.<br>
         <kbd>noreferrer</kbd> — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.<br>
         <kbd>prefetch</kbd> — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.<br>
         <kbd>search</kbd> — указывает, что целевой документ содержит инструмент для поиска.<br>
         <kbd>tag</kbd> — указывает ключевое слово для текущего документа.
      </td>
</tr>
<tr>
<td><kbd>shape</kbd></td>
<td>Задает форму активной области на карте и ее координаты. Может принимать следующие значения:<br>
         <kbd>rect</kbd> — активная область прямоугольной формы;<br>
         <kbd>circle</kbd> — активная область в форме круга;<br>
         <kbd>poly</kbd> — активная область в форме многоугольника;<br>
         <kbd>default</kbd> — активная область занимает всю площадь изображения.
      </td>
</tr>
<tr>
<td><kbd>target</kbd></td>
<td>Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения:<br>
         <kbd>_self</kbd> — страница загружается в текущее окно;<br>
         <kbd>_blank</kbd> — страница открывается в новом окне браузера;<br>
         <kbd>_parent</kbd> — страница загружается во фрейм-родитель;<br>
         <kbd>_top</kbd> — страница загружается в полное окно браузера.
      </td>
</tr>
<tr>
<td><kbd style="color:#38BAC7">type</kbd></td>
<td>Указывает MIME-тип файлов ссылки, т.е. расширение файла.</td>
</tr>
</tbody></table>